<!-- 教育经历 -->
<template>
	<view class="Dducation">
		<view class="BasicsBox" @click="statusMD()">
			<view class="leftBox">
				<view class="">
					最高学历
				</view>
				<view class="Address" :style="{color:user.EduDegree?'#000':'#C1C1C1'}">
					{{user.EduDegree==1?'初中及以下':user.EduDegree==2?'高中':user.EduDegree==3?'中专/中技':user.EduDegree==4?'大专':user.EduDegree==5?'本科':user.EduDegree==6?'硕士':user.EduDegree==7?'博士':'请选择最高学历'}}
				</view>
			</view>
			<view class="RightBox">
				<u-icon name="arrow-right" color="#949494" size="16"></u-icon>
			</view>
		</view>
		<view class="" v-if="user.EduDegree>2">
			<view class="BasicsBox">
				<view class="leftBox">
					是否统招
				</view>
				<view class="RightBox">
					<view class="tag" @click="checkOB('EduType',0)" :class="{'checkTag':user.EduType==0}">
						是
					</view>
					<view class="tag" @click="checkOB('EduType',1)" :class="{'checkTag':user.EduType==1}">
						否
					</view>
				</view>
			</view>
			<view class="BasicsBox" v-if="user.EduDegree>4">
				<view class="leftBox">
					学位证书
				</view>
				<view class="RightBox">
					<view class="tag" @click="checkOB('Academic',1)" :class="{'checkTag':user.Academic==1}">
						有
					</view>
					<view class="tag" @click="checkOB('Academic',0)" :class="{'checkTag':user.Academic==0}">
						无
					</view>
				</view>
			</view>
			<view class="BasicsBox2">
				<view class="title">
					学校名称
				</view>
				<u--input v-model="user.SchoolName" placeholderClass="userName" placeholder="请填写"
					:customStyle="{'font-weight':600}" fontSize="16px" @change="val=>checkOB('SchoolName',val)"
					border="none"></u--input>
			</view>
			<view class="BasicsBox2">
				<view class="title">
					所学专业
				</view>
				<u--input v-model="user.Major" placeholderClass="userName" placeholder="请填写"
					:customStyle="{'font-weight':600}" fontSize="16px" @change="val=>checkOB('Major',val)"
					border="none"></u--input>
			</view>
			<view class="BasicsBox">
				<view class="leftBox">
					<view class="">
						在校时间
					</view>
					<view class="Address" style="display: flex;
					flex-direction: row;justify-content: flex-start;align-items: center;margin-top:26rpx;">
						<view :style="{color:user.StartDate?'#000':'#C1C1C1'}" @click="timeMD('StartDate')">
							{{user.StartDate?user.StartDate:'入学时间'}}
						</view>
						<view class="xian"></view>
						<view :style="{color:user.EndDate?'#000':'#C1C1C1'}" @click="timeMD('EndDate')">
							{{user.EndDate?user.EndDate:'毕业时间'}}
						</view>
					</view>
				</view>
				<view class="RightBox">
					<u-icon name="arrow-right" color="#949494" size="16"></u-icon>
				</view>
			</view>
		</view>
		<u-datetime-picker :show="show1" v-if="show1" v-model="time" @confirm="confirm1" @cancel="show1=false"
			mode="year-month" :maxDate="maxDate" :minDate="minDate" />
		<u-picker :show="show2" :columns="columns2" keyName="label" @confirm="confirm2" @cancel="show2=false"
			:defaultIndex="defaultIndex2" />
	</view>
</template>

<script>
	import {
		atPresentTime,
		TimeString4,
		TimeString3
	} from '@/utils/Time.js'
	export default {
		data() {
			return {
				columns2: [
					[{
						label: '初中及以下',
						id: 1
					}, {
						label: '高中',
						id: 2
					}, {
						label: '中专/中技',
						id: 3
					}, {
						label: '大专',
						id: 4
					}, {
						label: '本科',
						id: 5
					}, {
						label: '硕士',
						id: 6
					}, {
						label: '博士',
						id: 7
					}]
				],
				show2: false,
				defaultIndex2: [],
				show1: false,
				maxDate: 0,
				minDate: 0,
				time: '',
				type: ''
			}
		},
		props: {
			user: {
				typeof: Object,
				default: {

				}
			}
		},
		created() {
			if (this.user.EduDegree) {
				this.defaultIndex2 = [this.user.EduDegree]
			}
		},
		methods: {
			checkOB(name, value) {
				let user = JSON.parse(JSON.stringify(this.user))
				user[name] = value
				this.$emit('update:user', user)
			},
			// 最高学历
			statusMD() {
				this.show2 = true
			},
			confirm2(val) {
				this.user.EduDegree = val.value[0].id
				this.show2 = false
			},
			//在校时间
			timeMD(val) {
				this.time = TimeString3(this.user[val])
				this.type = val
				this.show1 = true
			},
			confirm1(val) {
				let user = JSON.parse(JSON.stringify(this.user))
				user[this.type] = TimeString4(val.value)
				this.$emit('update:user', user)
				this.show1 = false
			}
		},
		created() {
			this.maxDate = atPresentTime()
		}
	}
</script>

<style lang="scss" scoped>
	.userName {
		font-weight: 600;
		color: #C1C1C1 !important;
		font-size: 32rpx;
	}

	.Dducation {
		display: flex;
		flex-direction: column;
		font-family: PingFang SC-Medium;
		color: #333;

		.xian {
			border-top: 4rpx solid #000;
			width: 20rpx;
			margin: 0rpx 20rpx;
		}

		.BasicsBox {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #E7E7E8;

			.leftBox {}

			.Address {
				margin-top: 16rpx;
				font-size: 32rpx;
				font-weight: 600;
			}

			.RightBox {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				font-weight: 600;

				.tag {
					box-sizing: border-box;
					padding: 10rpx 0rpx;
					width: 140rpx;
					text-align: center;
					background-color: #F7F8FA;
					margin-right: 10rpx;
					border-radius: 8rpx;
				}

				.checkTag {
					color: #3476FE !important;
					border: 1rpx solid #3476FE !important;
					background-color: #F1F8FF !important;
				}
			}
		}

		.BasicsBox2 {
			display: flex;
			flex-direction: column;
			font-size: 26rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #E7E7E8;

			.title {
				margin-bottom: 20rpx;
			}
		}
	}
</style>